<template>
  <n-form
    size="small"
    :modal="form"
    :model="form"
    label-placement="left"
    :label-width="80"
  >
    <n-form-item path="col" label="占用列数" v-if="data.widget.type!='hidden'">
      <input-item
        :widget="{ type: 'number', max: $store.state.form.col, min: 1 }"
        v-model:value="data.col"
        @update:value="$store.commit('setField', { col: $event })"
      />
    </n-form-item>
    <n-form-item path="row" label="占用行数" v-if="data.widget.type!='hidden'">
      <input-item
        :widget="{ type: 'number', min: 1 }"
        v-model:value="data.row"
        @update:value="$store.commit('setField', { row: $event })"
      />
    </n-form-item>
    <n-form-item path="label" label="标签">
      <input-item
        :widget="{ type: 'input' }"
        v-model:value="data.label"
        @update:value="$store.commit('setField', { label: $event })"
      />
    </n-form-item>
    <n-form-item path="name" label="字段名">
      <input-item
        :widget="{ type: 'input' }"
        v-model:value="data.name"
        @update:value="$store.commit('setField', { name: $event })"
      />
    </n-form-item>
    <n-form-item path="required" label="是否必填" v-if="data.widget.type!='hidden'">
      <input-item
        :widget="{ type: 'switch', disabled: data.name == '' || typeof data.name == 'undefined',}"
        v-model:value="data.required"
        @update:value="setRule(data)"
      />
    </n-form-item>
    <n-form-item path="rule" label="校验规则" v-if="data.widget.type!='hidden'">
      <input-item
        :widget="{
          type: 'select',
          options,
          disabled: data.name == '' || typeof data.name == 'undefined',
        }"
        v-model:value="data.rule"
        @update:value="setRule(data)"
      />
    </n-form-item>
    <n-form-item
      v-for="(item, i) in data.widget.attr"
      :key="i"
      :path="item.name"
      :label="item.label"
      :label-placement="item.type == 'option' ? 'top' : 'left'"
    >
      <input-item
        :widget="item"
        v-model:value="data.widget[item.name]"
        @update:value="$store.commit('setWidget', getObj(item.name, $event))"
      />
    </n-form-item>
  </n-form>
</template>
<script>
import { ref } from "vue";
import InputItem from "../../../components/InputItem.vue";
import DictOption from "../../../components/DictOption.vue";
import { options, getValidator } from "./validatorFuns.js";
import { useStore } from "vuex";
export default {
  components: { InputItem, DictOption },
  props: ["form", "data"],
  setup(props, { emit }) {
    const store = useStore();
    let test = ref({});
    const getObj = (key, value) => {
      console.log(key, value);
      let obj = {};
      obj[key] = value;
      return obj;
    };
    const showValue = (value) => {
      console.log(value);
    };
    const setRule = (data) => {
      let requ = data.hasOwnProperty("required") ? data.required : false
      let rule = data.hasOwnProperty("rule") ? data.rule : ""
      store.commit("setRule", { name: data.name, rule: getValidator(rule,requ) });
    };
    return {
      getObj,
      test,
      showValue,
      options,
      setRule,
    };
  },
};
</script>
